
<template>
  <div class="introduct-content" style="padding-bottom:24px;">
    <p class="introduct-title">{{ $t('guide.auto') }}</p>
    <div class="introduct-img"
      style="height: 290px;margin-bottom: 15px;">
      <imageBox :src="require('@/assets/introduct/zl.png')"
        alt="" fit="contain"/>
    </div>
    <div class="text-center">
      <el-checkbox v-model="autoZL"
        @change="onSetAutoZL" class="zl-checkbox">
        <b class="fb c333">{{ $t('guide.start') }}</b>
      </el-checkbox>
      <span class="fs12 c999">{{ $t('guide.setup') }}</span>
    </div>
  </div>
</template>
<script>
import imageBox from '@/components/image-box'
export default {
  components: {
    imageBox
  },
  props: {
    isNewInstall: Boolean
  },
  data () {
    return {
      autoZL: true
    }
  },
  computed: {
    statIds () {
      // [0勾选实时整理,1取消勾选实时整理]
      return this.isNewInstall ? [2565, 2566] : [2625, 2626]
    }
  },
  mounted () {
    this.$xz('xz_set_real_time_file_auto_sort', 1)
  },
  methods: {
    onSetAutoZL (val) {
      this.$xz('xz_substat_action', this.statIds[val ? 0 : 1])
      this.$xz('xz_set_real_time_file_auto_sort', val ? 1 : 0)
    }
  }
}
</script>
<style lang="scss" scoped>
.zl-checkbox{
  /deep/{
    .el-checkbox__input{
      vertical-align: -0.2em !important;
    }
    // .el-checkbox__inner{
    //   width: 18px;
    //   height: 18px;
    //   &::after{
    //     height: 9px;
    //     width: 5px;
    //     top: 1px;
    //   }
    // }
    .el-checkbox__label{
      b{
        font-size: 14px;
      }
    }
  }
}
</style>
